<template>
	<view class="page-func-pre page-common flex-column-gap-40">

		<view class="card-radio-8 flex-column-gap-10">
			<custom-swiper :pictures="pictures" radius="16rpx 16rpx 0 0" />
			<view class="plr-16 pb-16 flex-column-gap-10">
				<view class="flex-between-center ">
					<text class="normal-title-bold-16">{{prdName}}</text>
					<!-- <text class="normal-title-bold-20 blue-text">{{discountGoldenBean}}<text
							class="font-12">金豆</text></text> -->
				</view>
				<view class="split-line"></view>
				<view class="flex-column-gap-5">
					<view class="normal-title">注意事项</view>
					<view class="desc-14">
						<view>图片格式：JPG、JPEG、BMP、PNG</view>
						<view>图片大小：小于3MB</view>
						<view>图片分辨率：小于4000×4000</view>
					</view>
				</view>
			</view>

		</view>
		<view class="custom-button full-button" @tap="onChoosePhoto">
			<u-button type="primary" shape="circle" text="相册选择"></u-button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed
	} from "vue";
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		checkUploadImage,
		queryPackageApi,
	} from '@/common/js/method';
	import {
		versatileShowMap,
	} from '@/common/js/data';
	import customSwiper from '@/components/custom-swiper/custom-swiper.vue';

	const busiType = ref('black-white-coloring'); //业务类型，默认黑白上色
	const discountGoldenBean = ref(''); //金豆价格

	const getPackageInfo = async () => {
		let res = await queryPackageApi([13]); // 13-百变秀试用效果图套餐
		discountGoldenBean.value = res[0].data.packageList[0].discountGoldenBean;
	}

	// 轮播图
	const pictures = computed(() => {
		return versatileShowMap[busiType.value].swipers;
	})
	// 名称
	const prdName = computed(() => {
		return versatileShowMap[busiType.value].name;
	})


	const onChoosePhoto = async () => {
		const {
			uploadedSrc,
			width,
			height,
			type,
			fileSize,
		} = await checkUploadImage({
			limit: {
				width: 4000,
				height: 4000,
				fileSize: 3072, //3M
				types: ['JPG', 'JPEG', 'BMP', 'PNG'],
			}
		});
		const data = {
			imageUrl: encodeURIComponent(uploadedSrc),
			width,
			height,
			imageType: type,
			fileSize,
			discountGoldenBean: discountGoldenBean.value,
		};
		uni.navigateTo({
			url: `/pages/versatile-show/func-operator?type=${busiType.value}&data=${JSON.stringify(data)}`,
		});
	};
	onLoad((params) => {
		if (params.type) {
			busiType.value = params.type;
		}
		getPackageInfo();
		uni.setNavigationBarTitle({
			title: prdName.value,
		})
	})
</script>

<style lang="scss" scoped>
	.page-func-pre {
		padding: 40rpx 32rpx;
		background: #F5F5F5;
	}
</style>